<template>
  <div class="page">
    <el-card class="card">
      <h3>系统</h3>
      <el-form class="card_inner system-box">
        <el-row>
          <el-col :span="6">
            <el-form-item label="主机名：">
              <span class="card_inner_value">BLNET</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品型号：">
              <span class="card_inner_value">WG581 -WLAN - MQTT</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品名称：">
              <span class="card_inner_value">Gateway</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品ID：">
              <span class="card_inner_value">WG581WLAN21020100444</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="固件版本：">
              <span class="card_inner_value">WR5.MQTT.210106V3</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="Uboot版本：">
              <span class="card_inner_value">WR7A6.1603</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="模块名称：">
              <span class="card_inner_value">[C] OWLAN ，[R]</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="模块网络：">
              <span class="card_inner_value">WLAN</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="5G/4G信号值：">
              <div class="l-f">
                <span class="system-box_wuxian iconfont icon-wuxiandianbo"></span>
                <img class="system-box_xinhao mrg10" src="@/assets/images/xinhao-3.png" alt="">
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="WIFI信号值：">
              <div class="l-f ">
                <img class="system-box_xinhao" src="@/assets/images/wifi-3.png" alt="">
                <span class="card_inner_value mrg10">34%</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="运行时间：">
              <span class="card_inner_value">9d 0h 4m 45s</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="本地时间：">
              <span class="card_inner_value">Sat Jun 17 07:09-57 2023</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="平均负载：">
              <span class="card_inner_value">2.80,2.47,2.37</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="CPU使用率：">
              <span class="card_inner_value">0% usr , 0% sys , 100% idle</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="固件版本时间：">
              <span class="card_inner_value">2021-01-06 17 25:39</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="系统注册时间：">
              <span class="card_inner_value">Wed Jan 13 18:54:58 2021</span>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="采集程序版本：">
              <span class="card_inner_value">wtbl 3.0.0 db-210310.6064</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="云接入程序版本：">
              <span class="card_inner_value">wtbl 3.0.0-210310.5983</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="网络运营商：">
              <span class="card_inner_value">--</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="系统注册时间：">
              <span class="card_inner_value">Wed Jan 13 18:54:58 2021</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="基站定位信息：">
              <span class="card_inner_value">--</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="GPS定位信息：">
              <span class="card_inner_value">--</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="硬件接口信息：">
              <span class="card_inner_value">Wif模组:IMT20-3001,串口:1 RS4851, 存:Nu,定位:[Nul, Lora模块:[Nul, 0模块:INull</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="card">
      <h3>内存</h3>
      <el-form class="card_inner system-box">
        <el-row>
          <el-col :span="6">
            <el-form-item label="可用数：">
              <div class="l-f" style="height: 40px;">
                <el-progress 
                  :format="storageFormat"
                  style="width: 300px;" 
                  :text-inside="true" 
                  :stroke-width="20"
                  :percentage="70"></el-progress>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="空闲数：">
              <div class="l-f" style="height: 40px;">
                <el-progress 
                  :format="storageFormat"
                  style="width: 300px;" 
                  :text-inside="true" 
                  :stroke-width="20"
                  :percentage="70"></el-progress>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="已缓存：">
              <div class="l-f" style="height: 40px;">
                <el-progress 
                  :format="storageFormat"
                  style="width: 300px;" 
                  :text-inside="true" 
                  :stroke-width="20"
                  :percentage="70"></el-progress>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="已缓冲：">
              <div class="l-f" style="height: 40px;">
                <el-progress 
                  :format="storageFormat"
                  style="width: 300px;" 
                  :text-inside="true" 
                  :stroke-width="20"
                  :percentage="70"></el-progress>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="程序空间Flash：">
              <div class="l-f" style="height: 40px;">
                <el-progress 
                  style="width: 500px;"
                  :stroke-width="20"
                  :percentage="80"></el-progress>
                  <span class="card_inner_value mrg10">空闲空间: 11.3%(1.80 MB/16.00 MB)</span>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="card">
      <h3>网络</h3>
      <el-form class="card_inner system-box">
        <el-row>
          <el-col :span="6">
            <el-form-item label="IPv4 WAN状态：">
              <div class="l-f l-column l-col-start">
                <div class="l-f">
                  <span class="card_inner_label">设备名称：</span>
                  <span class="card_inner_value">wlan0</span>
                </div>
                <div class="l-f">
                  <span class="card_inner_label">类型：</span>
                  <span class="card_inner_value">static</span>
                </div>
                <div class="l-f">
                  <span class="card_inner_label">地址：</span>
                  <span class="card_inner_value">192.168.3.1</span>
                </div>
                <div class="l-f">
                  <span class="card_inner_label">子网掩码：</span>
                  <span class="card_inner_value">255.255.252.0</span>
                </div>
                <div class="l-f">
                  <span class="card_inner_label">网关：</span>
                  <span class="card_inner_value">192168.2.1</span>
                </div>
                <div class="l-f">
                  <span class="card_inner_label">域名服务DNS 1：</span>
                  <span class="card_inner_value">192168.2.1</span>
                </div>
                <div class="l-f">
                  <span class="card_inner_label">已连接：</span>
                  <span class="card_inner_value">0h 0m 13s</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="无线网络：">
              <div class="l-f l-column l-col-start">
                <div class="l-f">
                  <span class="card_inner_label">信号：</span>
                  <img class="system-box_xinhao" src="@/assets/images/xinhao-3.png" alt="">
                  <span class="card_inner_value mrg10">37%</span>
                </div>
                <div class="l-f">
                  <span class="card_inner_label">SSID：</span>
                  <span class="card_inner_value">hy5f3</span>
                </div>
                <div class="l-f">
                  <span class="card_inner_label">模式：</span>
                  <span class="card_inner_value">Client</span>
                </div>
                <div class="l-f">
                  <span class="card_inner_label">信道：</span>
                  <span class="card_inner_value">6(2.437 GHz)</span>
                </div>
                <div class="l-f">
                  <span class="card_inner_label">传输速率：</span>
                  <span class="card_inner_value">39 Mbit/s</span>
                </div>
                <div class="l-f">
                  <span class="card_inner_label">BSSID：</span>
                  <span class="card_inner_value">AC:AB:2E:09:01:1C</span>
                </div>
                <div class="l-f">
                  <span class="card_inner_label">加密方式：</span>
                  <span class="card_inner_value">WPA2 PSK(CCMP)</span>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="VLAN状态：">
              <span class="card_inner_value">WAN: 6t LAN: 0 1 2 3 4 6t</span>
            </el-form-item>
            <el-form-item label="默认路由：">
              <span class="card_inner_value">wlan0 : 192.168.2.1</span>
            </el-form-item>
            <el-form-item label="活动连接：">
              <div class="l-f" style="height: 40px;">
                <el-progress style="width: 150px;" :text-inside="true" :stroke-width="15"
                  :percentage="70">541/65535</el-progress>
                <span class="card_inner_value mrg10">541/65535</span>
              </div>
            </el-form-item>
            <el-form-item label="产品注册：">
              <span class="card_inner_value">产品注册</span>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="交换机状态：">
              <div class="l-f l-column l-col-start">
                <div class="l-f">
                  <span class="card_inner_value">FE0：</span>
                  <img class="card_inner_jhj mrg10" src="@/assets/images/jhj.png" alt="">
                </div>
                <div class="l-f">
                  <span class="card_inner_value">FE1：</span>
                  <img class="card_inner_jhj mrg10" src="@/assets/images/jhj.png" alt="">
                </div>
                <div class="l-f">
                  <span class="card_inner_value">FE2：</span>
                  <img class="card_inner_jhj mrg10" src="@/assets/images/jhj.png" alt="">
                </div>
                <div class="l-f">
                  <span class="card_inner_value">FE3：</span>
                  <img class="card_inner_jhj mrg10" src="@/assets/images/jhj.png" alt="">
                </div>
                <div class="l-f">
                  <span class="card_inner_value">FE4：</span>
                  <img class="card_inner_jhj mrg10" src="@/assets/images/jhj.png" alt="">
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="card">
      <h3>DHCP分配</h3>
      <el-table :data="dhcpData" style="width: 100%">
        <el-table-column prop="name" label="主机名" width="180">
        </el-table-column>
        <el-table-column prop="ipv4" label="IPv4-地址" width="180">
        </el-table-column>
        <el-table-column prop="address" label="MAC地址">
        </el-table-column>
        <el-table-column prop="date" label="剩余租期">
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="card">
      <h3>已连接站点</h3>
      <el-table :data="connectData" style="width: 100%">
        <el-table-column prop="mac" label="MAC-地址" width="180">
        </el-table-column>
        <el-table-column prop="network" label="网络" width="180">
        </el-table-column>
        <el-table-column prop="signal" label="信号">
          <template slot-scope="scope">
           <div class="l-f">
            <img class="system-box_xinhao" src="@/assets/images/xinhao-3.png" alt="">
            <span class="mrg10">{{ scope.row.signal }}</span>
           </div>
          </template>
        </el-table-column>
        <el-table-column prop="noise" label="噪声">
        </el-table-column>
        <el-table-column prop="receiveSpeed" label="接收速率">
        </el-table-column>
        <el-table-column prop="sendSpeed" label="发送速率">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data() {
    return {
      systemData: {

      },
      dhcpData: [],
      connectData: [
        {
          mac: 'AC:AB:2E:09:01:12',
          network: '客户端Client"hy5f3”',
          signal: '-88 dBm',
          noise: '0 dBm',
          receiveSpeed: '43.3 Mbit/s, MCS 4 20MHz',
          sendSpeed: '43.3 Mbit/s, MCS 10, 20MHz'
        }
      ]
    }
  },
  methods: {
    storageFormat(percentage) {
      return `88.266 MB / 123.555 MB ${percentage}12%`
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 20px;

  &_inner {
    padding: 0 30px;
    box-sizing: border-box;

    .card_inner_label {
      font-size: 14px;
      color: #999999;
      font-weight: 700;
    }

    .card_inner_value {
      font-size: 14px;
      font-weight: 700;
      color: #000000;
    }

    .card_inner_jhj {
      width: 28px;
      height: 28px;
    }

    ::v-deep .el-form-item__label {
      color: #409eff;
    }
  }
}

.system-box {
  &_wuxian {
    font-size: 30px;
    color: #999999;
  }

  &_xinhao {
    width: 40px;
  }
}

.mrg10 {
  margin-left: 10px;
}
</style>
